{__NOLAYOUT__}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>{$zy.0.title.val}-{$seo_title}</title>
    <include file="Index:meta" />
    <!-- ZUI1.7.0 -->
    <link rel="stylesheet" href="__PUBLIC__/dist/css/zui.min.css">
    <link href="__PUBLIC__/dist/css/main.css" rel="stylesheet">
</head>

<body>
    <i class="goTop"></i>
    <div id="page">
        <!-- header -->
        <include file="Index:header" />
        <!-- header end -->
        <section class="mb-60">
            <div class="bg-white pt-20">
                <div class="details-head clearfix container">
                    <div class="col-xs-12 clearfix breadcrumb_box mb-20">
                        <ol class="breadcrumb">
                            <li>
                                <a href="/">
                                    <i class="icon icon-home"></i>
                                    首页
                                </a>
                            </li>
                            <li>
                                <a href="index.php?m=Index&a=major&pid={$zy.0.id.val}">{$zy.0.title.val}</a>
                            </li>
                            <li>
                                <a href="index.php?m=Index&a=major&pid={$zy.0.id.val}&cid={$gw.0.id.val}">{$gw.0.title.val}</a>
                            </li>
                            <li class="active">{$xm.title.val}</li>
                        </ol>
                        <div class="btn-group pull-right">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                <i class="icon icon-list"></i> 项目列表</button>
                            <ul class="dropdown-menu" role="menu">
                                <!-- 项目列表 -->
                                <foreach name="xmlist" item="vo">
                                    <li>
                                        <a href="/index.php?m=Index&a=details&pid={$zy.0.id.val}&cid={$gw.0.id.val}&oid={$vo.id.val}">
                                            {$vo.title.val}
                                        </a>
                                    </li>
                                </foreach>
                                <!-- 项目列表 end-->
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-7 details-head-img mb-20">
                        <img src="{$xm.bigimage.val}">
                    </div>
                    <div class="col-md-5 details-head-text mb-20">
                        <div>
                            <a class="text-primary">所属岗位：{$gw.0.title.val}</a>
                            <a class="pull-right text-primary">
                                <i class="icon icon-qrcode"></i>移动教学</a>
                            <div class="popover bottom">
                                <div class="arrow"></div>
                                <div class="popover-content">
                                    <div class="qrcode"></div>
                                </div>
                            </div>
                        </div>
                        <h1 class="text-ellipsis">{$xm.xmid.val}　{$xm.title.val}</h1>
                        <div class="row con-group">
                            <p class="col-sm-6">
                                <span class="con-title">{$xm.unidentifier.attr.name|default="统一编码"}：</span>{$xm.unidentifier.val}</p>
                            <p class="col-sm-6">
                                <span class="con-title">{$xm.categy.attr.name|default="项目类别"}：</span>{$xm.categy.val}</p>
                            <p class="col-sm-6">
                                <span class="con-title">{$xm.createtime.attr.name|default="创建时间"}：</span>{$xm.createtime.val|date="Y-m-d",###}</p>
                            <p class="col-sm-6">
                                <span class="con-title">{$xm.updatetime.attr.name|default="修改时间"}：</span>{$xm.updatetime.val|date="Y-m-d",###}</p>
                            <p class="col-xs-12">
                                <span class="con-title">{$xm.bzry.attr.name|default="编制人员"}：</span>{$xm.bzry.val}</p>
                            <p class="col-sm-6">
                                <span class="con-title">{$xm.auditor.attr.name|default="审核人员"}：</span>{$xm.auditor.val}</p>
                            <p class="col-sm-6">
                                <span class="con-title">{$xm.status.attr.name|default="审核状态"}：</span>{$xm.status.val}</p>
                        </div>
                        <div class="con-group">
                            <p class="con-title">{$xm.description.attr.name|default="项目简介"}：</p>
                            <div>
                                {$xm.description.val|str_cut=###,120}
                            </div>
                            <p class="con-title">{$xm.basis.attr.name|default="编制依据"}：</p>
                            <div>
                                {$xm.basis.val}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 媒体播放 容器 -->
                <div class="details-media clearfix container bg-white">
                    <div class="col-xs-12">
                        <h1 class="mb-10" id="video_name">小瑞与大魔王</h1>
                        <div class="clearfix breadcrumb_box">
                            <ol class="breadcrumb">
                                <li>
                                    <a href="index.php?m=Index&a=major&pid={$zy.0.id.val}">{$zy.0.title.val}</a>
                                </li>
                                <li>
                                    <a href="index.php?m=Index&a=post&pid={$gw.0.id.val}">{$gw.0.title.val}</a>
                                </li>
                                <li>{$xm.title.val}</li>
                                <li class="active" id="video_title">认识二维动画动画制作</li>
                            </ol>
                        </div>
                        <p class="mb-20">
                            教学视频
                            <span id="video_author"></span>
                            &nbsp;
                            <span id="video_time"></span>
                        </p>
                        <!-- <div class="example mb-20">
                            <span class="label">标签</span>
                            <span class="label label-primary">Tag</span>
                            <span class="label label-success">Success</span>
                            <span class="label label-info">Info</span>
                            <span class="label label-warning">Warning</span>
                            <span class="label label-danger">Danger</span>
                        </div> -->
                        <div class="mb-20 row">
                            <div class="iframe col-md-9"></div>
                            <div class="col-md-3">
                                <h2>参考资源</h2>
                                <hr>
                                <ul class="details-media-data">
                                    <!-- cell  -->
                                    <!-- <li class="mb-10">
                                        <a>动画作品制作流程及步骤动画作品制作流程及步骤 </a>
                                    </li> -->
                                    <!-- cell end -->
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="details-content container bg-white pt-20">
                <div class="container mb-10">
                    <ul class="nav nav-secondary nav1">
                        <li class="active">
                            <a data-page="about">
                                <h2>项目介绍</h2>
                            </a>
                        </li>
                        <li>
                            <a data-page="material">
                                <h2>电子教材</h2>
                            </a>
                        </li>
                        <li>
                            <a href="index.php?m=Index&a=details_pdf&oid={$xm.id.val}" target="myiframe">
                                <h2>电子课件</h2>
                            </a>
                        </li>
                        <li>
                            <a href="index.php?m=Index&a=details_plan&oid={$xm.id.val}" target="myiframe">
                                <h2>电子教案</h2>
                            </a>
                        </li>
                        <li>
                            <a href="index.php?m=Index&a=details_video&oid={$xm.id.val}" target="myiframe">
                                <h2>教学视频</h2>
                            </a>
                        </li>
                        <li>
                            <a href="index.php?m=Index&a=details_courseware&oid={$xm.id.val}" target="myiframe">
                                <h2>微课</h2>
                            </a>
                        </li>

                        <li>
                            <a href="index.php?m=Index&a=details_download&oid={$xm.id.val}" target="myiframe">
                                <h2>素材下载</h2>
                            </a>
                        </li>
                        <!-- <li>
                            <a href="view/details/details-comment.html" target="myiframe">
                                <h2>教学点评</h2>
                            </a>
                        </li>
                        <li>
                            <a href="view/details/details-exam.html" target="myiframe">
                                <h2>考试测试</h2>
                            </a>
                        </li> -->
                    </ul>
                </div>
                <div class="details-content-iframe">
                    <iframe id="content_iframe" name="myiframe" src="" scrolling="no" frameborder="0"></iframe>
                    <!-- 项目介绍 -->
                    <div class="iframe-about clearfix">
                        <div class="col-md-2">
                            <ul class="nav nav-secondary nav-stacked nav2">
                                <li class="active">
                                    <a href="index.php?m=Index&a=pro_basic&oid={$xm.id.val}" target="about_iframe">基础信息</a>
                                </li>
                                <li>
                                    <a href="index.php?m=Index&a=pro_point&oid={$xm.id.val}" target="about_iframe">定位</a>
                                </li>
                                <li>
                                    <a href="index.php?m=Index&a=pro_purpose&oid={$xm.id.val}" target="about_iframe">学习目标与预期</a>
                                </li>
                                <li>
                                    <a href="index.php?m=Index&a=pro_design&oid={$xm.id.val}" target="about_iframe">设计理念与框架</a>
                                </li>
                                <li>
                                    <a href="index.php?m=Index&a=pro_advice&oid={$xm.id.val}" target="about_iframe">教学建议（设计）</a>
                                </li>
                                <li>
                                    <a href="index.php?m=Index&a=pro_test&oid={$xm.id.val}" target="about_iframe">课程考核</a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-10">
                            <iframe id="about_iframe" name="about_iframe" src="" scrolling="no" frameborder="0"></iframe>
                        </div>
                    </div>

                    <!-- 电子教材 -->
                    <div class="iframe-material clearfix none">
                        <div class="clearfix row">
                            <!-- <div class="col-md-10 row">
                                <p class="col-sm-4"><span class="con-title">{$xm.time.attr.name}：</span>{$xm.time.val}</p>
                            </div> -->

                            <div class="col-md-9 row">
                                <p class="col-sm-4 mb-10">
                                    <span class="con-title">{$xm.time.attr.name}：</span>{$xm.time.val}小时</p>
                                <p class="col-sm-4 mb-10">
                                    <span class="con-title">任务数：</span>{$rw|count}个</p>
                                <p class="col-sm-4 mb-10">
                                    <span class="con-title">{$xm.createtime.attr.name}：</span>{$xm.createtime.val|date='Y-m-d',###}</p>
                                <p class="col-sm-12">
                                    <span class="con-title">编制人员：</span>邱老师、李老师</p>
                            </div>

                            <div class="col-md-3 text-right" id="downzip">
                                <!-- <a class="btn btn-primary" href="index.php?m=Index&a=downzip&oid={$xm.id.val}&type=2">下载电子课件</a>&nbsp;&nbsp; -->
                                
                                <!-- <a class="btn btn-primary" href="index.php?m=Index&a=downzip&oid={$xm.id.val}&type=1">下载电子教材</a> -->
                                <eq name="rw[0]['rwwjonoff']['val']" value="true"> 
                                <a class="btn btn-primary"  data-toggle="modal" data-target="#downModal">下载电子教材</a>
                                <else/>
                                <a class="btn btn-disabled" disabled title="需下载申请">下载电子教材</a>
                                </eq>
                            </div>
                        </div>
                        <hr>
                        <div class="clearfix row">
                            <div class="col-md-2">
                                <nav id="myScrollspy" class="menu" data-ride="menu1">
                                    <ul class="nav nav-primary">
                                        <!-- 任务 nav     -->
                                        <foreach name="rw" item="vo" key="key">
                                            <li class="{$key === 0?'active':'' }">
                                                <a title="{$vo.title.val}" data-id="#con{$key}" data-html="{$vo.rwwj.val}">
                                                    <i class="icon icon-forward "></i>
                                                    
                                                    {$vo.title.val|str_cut=###,14}
                                                </a>
                                            </li>
                                        </foreach>
                                        <!--任务 nav end-->
                                    </ul>
                                </nav>
                            </div>
                            <section class="col-md-8">
                                <!-- 任务 content -->
                                <foreach name="rw" item="vo" key="key">
                                    <!-- <div id="con{$key}"></div> -->
                                    <div id="con{$key}">{$vo.wbbj.val}</div>
                                </foreach>
                                <!-- 任务 content end-->
                            </section>
                            <div class="col-md-2">
                                <aside class="material_side">
                                    <h2>相关资源</h2>
                                    <!-- 相关 1j -->
                                    <foreach name="rw" item="vo" key="key">
                                        <div class="content {$key==0?'show':''}">
                                            <!-- cell -->
                                            <foreach name="vo['xgzy']['val']" item="v">
                                                <a class="text-ellipsis" href="{$v.url}" target="_target">{$v.title}</a>
                                            </foreach>
                                            <empty name="vo['xgzy']['val']">
                                                无相关任务资源
                                            </empty>
                                            <!-- cell end -->
                                        </div>
                                    </foreach>
                                    <!-- 相关 1j end-->

                                </aside>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>

        <include file="Index:footer" />
    </div>

    <div class="modal fade" id="lightimg">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="col-md-9 image">
                    <button class="controller prev show">
                        <i class="icon icon-chevron-left"></i>
                    </button>
                    <button class="controller next show">
                        <i class="icon icon-chevron-right"></i>
                    </button>
                    <img id="lightimgSrc" src="">
                </div>
                <div class="col-md-3 content">
                    <h4 id="lightimgTitle" class="mb-20"></h4>
                    <!-- <p id="lightimgTime" class="mb-10">时间：<span></span></p>
                    <p id="lightimgContent" class="mb-60"></p> -->
                    <div class="text-right">
                        <a class="btn btn-block btn-disabled disabled" disabled id="lightimgDown" href="" download>下载</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="modal fade" id="downModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body clearfix">
                    <div class="col-xs-12">
                       
                        <div class="list-down clearfix">
                            <ul>
                                    <foreach name="rw" item="vo" key="key">
                                        <eq name="vo['rwwjonoff']['val']" value="true"> 
                                            <li class="clearfix"><div class="col-xs-7">{$vo.title.val}</div><div class="col-xs-3">{$vo.createtime.val|date='Y-m-d',###}</div><div class="col-xs-2 text-right"><a href="{$vo.rwwj.val}" class="icon icon-down"></a></div></li>
                                        </eq>
                                    </foreach>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="__PUBLIC__/dist/js/jquery.min.js"></script>
    <script src="__PUBLIC__/dist/js/zui.min.js"></script>

    <!-- qrcode -->
    <script src="__PUBLIC__/dist/js/jquery.qrcode.min.js"></script>
    <script src="__PUBLIC__/dist/js/main.js"></script>
    <script>
         

        $('.qrcode').qrcode(window.location.href);
        //电子教材 get page content
        // $("[data-html]").each(function () {
        //     var file = $(this).data("html");
        //     var id = $(this).data("id");
        //     var $con = $(id);
        //     if (file) {
        //         //执行页面生成地址
        //         $.post("index.php?m=Index&a=wordtohtml&file=" + file, {}, function (json) {
        //             json = JSON.parse(json);
        //             if (json) {
        //                 //获得dom
        //                 var host = "";//"http://wpt.wei580.com/";
        //                 $.get(host + json.url, {}, function (htm) {
        //                     var reg = /src=["|']/g;
        //                     //console.log(html)
        //                     //替换图片地址
        //                     htm = htm.replace(reg, 'src="' + host + json.path);
        //                     //4个空格转换
        //                     htm = htm.replace(/\s{4}/g, "&emsp;&emsp;");
        //                     $con.html(htm)
        //                 })
        //             }

        //         })

        //     }

        // })

        //电子教案下载
        $("#downzip a").on("click", function (e) {
            e.preventDefault();
            var $that = $(this);
            var url = $that.attr("href");
            if (url) {
                $that.addClass("disabled");
                $.post(url, {}, function (serve) {
                    if (!serve) return;
                    //下载地址
                    var data = JSON.parse(serve)
                    var file = data.file;
                    var elemIF = document.createElement("a");
                    elemIF.href = file;
                    // elemIF.style.display = "none";
                    elemIF.download = data.name;
                    // document.body.appendChild(elemIF);
                    elemIF.click();
                    $that.removeClass("disabled");
                })
            }
        })

        // Tab 切换active
        $('body').on('click', '.nav1 > li:not(.disabled) > a', function () {
            var $item = $(this).parent('li');
            $item.parent().children('.active').removeClass('active');
            $item.addClass('active');
            $('.details-content-iframe > div').hide();

            obj = $(this).attr("data-page");
            if (obj) {
                obj = ".iframe-" + obj;
                $(obj).show();
                $("#content_iframe").hide();

                $(window).off("scroll", myScroll)
                $(window).on("scroll", myScroll)
            } else {

                $('.details-content-iframe > div').hide();
                $('.details-content-iframe > iframe').show();

                // 图片素材列表 大图展示
                if ($(this).find("h2").html() == "素材下载") {

                    document.getElementById("content_iframe").onload = function () {
                        var iframeBody = document.getElementById("content_iframe").contentWindow.document.body;
                        iframeBody = $(iframeBody);
                        var imgbox = iframeBody.find(".imgbox")
                        var index;
                        imgbox.on("click", "[data-image]", function () {
                            var that = $(this);
                            index = that.parents("section").index();
                            console.log(index)

                            lightImg(index)

                            $('#lightimg').modal('show');
                        })
                        // modal显示
                        function lightImg(num) {
                            if (num == 0) {
                                $("#lightimg .controller.prev").removeClass("show");
                                $("#lightimg .controller.next").addClass("show");
                            } else if (num == imgbox.find("[data-image]").length - 1) {
                                $("#lightimg .controller.prev").addClass("show");
                                $("#lightimg .controller.next").removeClass("show");
                            } else {
                                $("#lightimg .controller.prev").addClass("show");
                                $("#lightimg .controller.next").addClass("show");
                            }

                            var o = imgbox.find("section").eq(num).find("img");
                            $("#lightimgSrc").attr("src", o.data("image"));
                            $("#lightimgTitle").html(o.data("title"));
                            //$("#lightimgTime").html(o.data("time"));
                            //$("#lightimgContent").html(o.data("content"));
                            if(o.data("fileonoff"))
                            {
                                $("#lightimgDown").attr("href", o.data("image"));
                                $("#lightimgDown").removeAttr("disabled").removeClass("btn-disabled").removeClass("disabled").addClass("btn-primary");
                            }
                            else
                            {
                                $("#lightimgDown").attr("href", "");
                                $("#lightimgDown").attr("disabled","").addClass("btn-disabled").addClass("disabled").removeClass("btn-primary");
                            }


                            //$("#lightimgDown").attr("href", o.data("image"));
                        }
                        $("#lightimg").on("click", ".prev", function () {
                            index--;
                            lightImg(index);
                        })
                        $("#lightimg").on("click", ".next", function () {
                            index++;
                            lightImg(index);
                        })
                    }
                }
            }
            // 隐藏播放容器 显示通用head
            $('.details-head').show();
            $('.details-media .iframe iframe').remove();
            $('.details-media').hide();
        });

        function myScroll() {
            var oTop = $('.details-content-iframe').offset().top;
            // 滚动判断 悬浮tab
            var s = obj == ".iframe-material" ? $(window).scrollTop() - 80 : $(window).scrollTop();
            if (s > oTop) {
                $("#myScrollspy").css({
                    "position": "fixed",
                    "top": "20px",
                    "width": $("#myScrollspy").parent().width() + "px"
                })
                $(".nav2").css({
                    "position": "fixed",
                    "top": "20px",
                    "width": $(".nav2").parent().width() + "px"
                })
                $(".material_side").css({
                    "position": "fixed",
                    "top": "20px",
                    "width": $(".material_side").parent().width() + "px"
                })
            } else {
                $("#myScrollspy,.nav2,.material_side").css({
                    "position": "relative",
                    "top": 0,
                    "width": ""
                })
            }

            if (obj == ".iframe-material") {
                // 滚动监听
                var scrollObj = $(".iframe-material section > div");
                scrollObj.each(function () {
                    var _target = parseInt($(this).offset().top);
                    var _i = $(this).index();
                    if (_target < $(window).scrollTop()) {

                        $('#myScrollspy li').removeClass("active");
                        $('#myScrollspy li').eq(_i).addClass("active");

                        $(".material_side div").removeClass("show");
                        $('.material_side div').eq(_i).addClass("show");
                    }
                });
            }
        }

        // tab avtive切换
        $('.iframe-about .nav').on('click', 'li:not(.nav-parent) > a', function () {
            var $this = $(this);
            $('.iframe-about .nav .active').removeClass('active');
            $this.closest('li').addClass('active');

            $(window).scrollTop($('.details-content-iframe').offset().top - 60)
        });

        // 滚动监听 A 链接跳转 
        $('#myScrollspy li').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            var _i = $(this).index();
            $('body, html').animate({ scrollTop: $('.iframe-material section > div').eq(_i).offset().top + 1 }, 10);

            console.log($('.iframe-material section > div').eq(_i).offset().top)
        });


        $(".nav1 a").eq(0).trigger('click');
        //相关资源链接转链接
        $(".material_side .text-ellipsis").each(function () {
            var $that = $(this);
            var url = $that.attr("href");
            var reg = /\/{2}/g;
            if (url && !url.match(reg)) {
                url = "//" + url;
                $that.attr("href", url);
            }

        })

        // 获取视频页面
        window.Video = function (src, data) {
            $('.details-head').hide();
            $('.details-media .iframe iframe').remove();
            var htm = '<iframe src="' + src + '" allowFullScreen="ture"  frameborder="0"></iframe>';
            $('.details-media').show();
            $('.details-media .iframe').append(htm);
            $("body").scrollTop(80);
            if (data) {
                document.querySelector("#video_title").innerHTML = data.title;
                document.querySelector("#video_name").innerHTML = data.name || data.title;
                document.querySelector("#video_time").innerHTML = data.time;
                document.querySelector("#video_author").innerHTML = data.author || "";

            }
        }
    </script>
</body>

</html>